<template>
  <ul class="ul-flex">
    <li v-for="(item, index) in operationData" :key="index" class="li-wrap">
      <h6 class="top">
        0
        <span class="icon-text">·已出租</span>
      </h6>
      <ul class="circle-flex">
        <li class="circle-l">
          剩余租期
          <i class="i">{{ item.term }}</i>
          个月
        </li>
        <li class="circle-r">
          <el-progress type="dashboard" :percentage="item.percentage" :color="colors" :width="60"/>
        </li>
      </ul>
      <i class="i-more">
        <el-popover placement="right" width="200" trigger="click">
          <h6 style="margin: 4px 0 10px 0">房源操作</h6>
          <el-button size="small" icon="el-icon-edit" style="width: 172px">登记租客</el-button>
          <h6 style="margin: 20px 0 10px 0">合同操作</h6>
          <el-button size="small" icon="el-icon-star-off" style="width: 172px">退租</el-button>
          <div style="margin: 10px 0">
            <el-button size="small" icon="el-icon-star-on" style="width: 172px">续租</el-button>
          </div>
          <i slot="reference" class="el-icon-more"></i>
        </el-popover>
      </i>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    bgmData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      percentage: 10,
      colors: [
        {color: '#f56c6c', percentage: 20},
        {color: '#e6a23c', percentage: 40},
        {color: '#5cb87a', percentage: 60},
        {color: '#1989fa', percentage: 80},
        {color: '#6f7ad3', percentage: 100}
      ],
      operationData: [
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0},
        {term: '0', percentage: 0}
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.ul-flex {
  display: flex;
  flex-flow: row wrap;

  .li-wrap {
    position: relative;
    width: 257px;
    height: 154px;
    background: #fff;
    box-shadow: 0px 2px 4px 0px rgba(11, 70, 89, 0.1);
    border-radius: 20px;
    padding: 16px 20px;
    margin: 12px 20px 8px 0;

    .top {
      font-size: 20px;
      font-weight: bold;
      color: #1d252f;

      .icon-text {
        font-size: 14px;
        font-weight: 500;
        color: #f53f3f;
      }
    }

    .circle-flex {
      display: flex;
      align-items: center;
      margin-top: 32px;

      .circle-l {
        flex: 1;
        height: 24px;
        line-height: 24px;
        font-size: 15px;
        font-weight: 500;
        color: #1d252f;
        padding-top: 12px;

        .i {
          color: #f53f3f;
          font-style: normal;
        }
      }

      .circle-r {
        flex: 0 0 68px;
      }
    }

    .i-more {
      position: absolute;
      top: 12px;
      right: 12px;
      cursor: pointer;
    }
  }
}
</style>
